<template>
    <p class="scoring-item-detail">{{ score.rule.item }}:
        <span>{{ totalScore }}</span>
    </p>
</template>

<script setup lang="ts">
import { ScoringRule } from '@/domain/ScoringRule';
import { computed } from 'vue';

const props = defineProps<{
    score: {
        id: number,
        leaderScore: number,
        masterScore: number,
        rule: ScoringRule
    }
}>()

const cappedLeader = computed<number>(() => {
    const top = props.score?.rule?.rules?.leader?.topScore ?? undefined;
    const raw = props.score?.leaderScore ?? 0;
    if (typeof top === 'number' && top > 0) {
        return Math.min(raw, top);
    }
    return raw;
});

const cappedMaster = computed<number>(() => {
    const top = props.score?.rule?.rules?.master?.topScore ?? undefined;
    const raw = props.score?.masterScore ?? 0;
    if (typeof top === 'number' && top > 0) {
        return Math.min(raw, top);
    }
    return raw;
});

// isMasterScore: 0=仅山长(leader)，1=仅师门(master)，2=两者都算
const totalScore = computed<number>(() => {
    const mode = props.score?.rule?.rules?.isMasterScore ?? 2;
    if (mode === 0) return cappedLeader.value;
    if (mode === 1) return cappedMaster.value;
    return cappedLeader.value + cappedMaster.value;
});
</script>

<style scoped>
.scoring-item-detail {
  margin-bottom: 3px;
  color: #383838;
  font-size: 15px;
}
</style>